<template>
	<div class="product_con">
		<el-form :model="listQuery" class="el-form" label-width="100px">
			<div class="el-form-top">
				<span class="top-left"
					><span class="el-icon-search"></span>筛选搜索</span
				>
				<div class="top-right">
					<el-button size="mini" @click="resetFun">重置</el-button
					><el-button size="mini" type="primary" @click="searchFun"
						>查询</el-button
					>
				</div>
			</div>
			<div class="el-form-content serch-box" align="center">
				<el-form-item label="输入搜索" size="mini">
					<el-input v-model="listQuery.name" placeholder="商品名称"></el-input>
				</el-form-item>
				<el-form-item label="商品货号" size="mini">
					<el-input
						v-model="listQuery.product_sn"
						placeholder="商品货号"
					></el-input>
				</el-form-item>
				<el-form-item label="商品分类" size="mini">
					<div class="block">
						<el-cascader
							v-model="productCateValue"
							:options="productCateOptions"
						></el-cascader>
					</div>
				</el-form-item>

				<el-form-item label="商品品牌" size="mini">
					<el-select v-model="listQuery.brand_id" placeholder="请选择品牌">
						<el-option
							v-for="item in brandOptions"
							:key="item.id"
							:label="item.name"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="上架状态" size="mini">
					<el-select v-model="listQuery.publish_status" placeholder="全部">
						<el-option
							v-for="item in publish_satausOptions"
							:label="item.label"
							:value="item.value"
							:key="item.value"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="审核状态" size="mini">
					<el-select v-model="listQuery.verify_status" placeholder="全部">
						<el-option
							v-for="item in verify_statusOption"
							:label="item.label"
							:value="item.value"
							:key="item.value"
						></el-option>
					</el-select>
				</el-form-item>
			</div>
		</el-form>
		<el-row>
			<el-col class="title-col" :span="24"
				><div class="grid-content bg-purple-dark product-title">
					<div><span class="iconfont">&#xe618;</span>数据列表</div>
					<el-button @click="addFun()">添加</el-button>
				</div></el-col
			>
		</el-row>
		<el-table
			:data="productList"
			class="productList"
			border
			style="width: 100%"
		>
			<el-table-column prop="id" label="编号"> </el-table-column>
			<el-table-column label="商品图片" width="120px">
				<template slot-scope="scope">
					<img :src="scope.row.pic" class="product_img" />
				</template>
			</el-table-column>
			<el-table-column prop="name" label="商品名称" width="120px">
			</el-table-column>
			<el-table-column label="价格/货号" width="150px">
				<template slot-scope="scope">
					<div>
						<span class="item-tip">价格:</span
						>{{ scope.row.original_price | money }}
					</div>
					<div>
						<span class="item-tip">货号:</span>{{ scope.row.product_sn }}
					</div>
				</template>
			</el-table-column>
			<el-table-column label="标签" align="center">
				<template slot-scope="scope">
					<div>上架:{{ scope.row.publish_status }}</div>
					<div>新品:{{ scope.row.new_status }}</div>
					<div>推荐:{{ scope.row.recommand_status }}</div>
				</template>
			</el-table-column>
			<el-table-column
				prop="sort"
				label="排序"
				align="center"
			></el-table-column>
			<el-table-column
				prop="sale"
				label="销量"
				align="center"
			></el-table-column>
			<el-table-column label="审核状态" align="center">
				<template slot-scope="scope">
					{{ scope.row.verify_status | verifyType }}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="180px" align="center">
				<template slot-scope="scope">
					<el-button size="mini" @click="editFun(scope.row.id)">编辑</el-button>
					<el-button size="mini" type="danger" @click="delFun(scope.row.id)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="listQuery.pageNum"
			:page-sizes="[5, 10, 15, 20]"
			:page-size="listQuery.pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
		>
		</el-pagination>
	</div>
</template>
<script>
import { fetchProductList, deleteProduct } from "@/api/product";
import productmixing from "./productmixing";
export default {
	name: "product",
	data: function() {
		return {
			productList: [],
			formInline: {
				input: "",
			},
			listQuery: {
				pageSize: 10, //一页10条数据
				pageNum: 1, //当前页
				name: "",
				product_sn: null,
				publish_status: null, //上架状态
				brand_id: null,
				verify_status: null, //审核状态
				product_category_id: null,
			},
			publish_satausOptions: [
				{ value: 1, label: "上架" },
				{ value: 0, label: "下架" },
			],
			verify_statusOption: [
				{ value: 1, label: "已审核" },
				{ value: 0, label: "未审核" },
			],
			total: 0, //总数量
		};
	},
	mounted() {
		this.getProductData();
	},
	filters: {
		verifyType(val) {
			console.log(val);
			return val ? "已审核" : "未审核";
		},
		money(val) {
			return "¥ " + val;
		},
	},
	methods: {
		//添加
		addFun() {
			this.$router.push("/pms/productadd/");
		},
		//重置
		resetFun() {
			this.listQuery = {
				pageSize: 10, //一页10条数据
				pageNum: 1, //当前页
				name: "",
				product_sn: null,
				publish_status: null, //上架状态
				brand_id: null,
				verify_status: null, //审核状态
				product_category_id: null,
			};
			this.getProductData("");
		},
		//查询
		searchFun() {
			this.getProductData();
		},
		//修改
		editFun(id) {
			console.log("修改触发了", id);
			this.$router.push("/pms/productupdate/" + id);
		},
		//删除
		delFun(id) {
			console.log("删除触发了", id);
			this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					deleteProduct({ id: id }).then((res) => {
						console.log("删好了");
						if (res.type == "success") {
							this.$message({
								type: "success",
								message: "删除成功!",
							});
							this.getProductData();
						}
					});
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消删除",
					});
				});
		},
		//5.修改每页显示的条数
		handleSizeChange(val) {
			console.log("修改每页显示的条数 触发了", val);
			this.listQuery.pageSize = val;
			this.listQuery.pageNum = 1;
			//重新获取数据
			this.getProductData();
		},
		//6.修改当前页的页码
		handleCurrentChange(val) {
			console.log("修改当前页的页码 触发了", val);
			this.listQuery.pageNum = val;
			this.getProductData();
		},
		onSubmit() {
			console.log("submit!");
		},
		async getProductData() {
			//this.listQuery 传给后台的参数  ，pageNum当前页的页码，pageSize一页有多少条数据
			let res = await fetchProductList(this.listQuery);
			this.productList = res.product;
			this.total = res.total;
		},
	},
	//注册mixin
	mixins: [productmixing],
};
</script>
<style scoped lang="scss">
.product_con {
	margin: 10px;
	.el-form {
		border: 1px solid #ebeef5;
		.el-form-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #ebeef5;
			height: 40px;
			padding: 10px;
		}
		.el-form-content {
			margin-top: 10px;
			width: 100%;
			overflow: hidden;
			.el-form-item {
				width: 30%;
				float: left;
				.el-input {
					width: 100%;
				}
				.el-select {
					width: 100%;
				}
				.el-cascader {
					width: 100%;
				}
			}
		}
	}
	.title-col {
		margin-bottom: 10px;
	}
	.product-title {
		display: flex;
		justify-content: space-between;
		border: 1px solid #ebeef5;
		border-top: none;
		height: 40x;
		line-height: 40px;
		padding: 10px;
	}
	.productList {
		text-align: center;
		.product_img {
			width: 100px;
		}
		.item-tip {
			margin-right: 5px;
			display: inline-block;
		}
	}
}
</style>
